<html>
	<head>

		<script src="../js/jquery.min.js"></script>
		<script src="../js/jquery.Jcrop.js"></script>
		<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
		<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />

		<script language="Javascript">
			 var jcrop_api;
			 $(document).ready(function(){
			  jcrop_api = $.Jcrop('#cropbox',  { bgColor: 'black', 'bgOpacity': .4,aspectRatio:1.25,});	
			 });		
			
//			 var jcrop_api;
//			 jQuery(window).load(function(){			 
//				initJcrop();
//				function initJcrop(){
//					jcrop_api = $.Jcrop('#cropbox',  { bgColor: 'black', 'bgOpacity': .4,aspectRatio:1.25,});	
////					cornerHandles: false,
////					sideHandles:		false,
////		      drawBorders:		false
////		      dragEdges:			false
//						  
//				};
//
//			});
      
			// Our simple event handler, called from onChange and onSelect
			// event handlers, as per the Jcrop invocation above
			function showPreview(coords)
			{				
				if (parseInt(coords.w) > 0){
					 jQuery('#position').html(coords.w+'h:'+
					                          coords.h+'x:'+
					                          coords.x+'y:'+
					                          coords.y); 
				}
			}

    function show_preview(aspect_ratio, p_width, p_height, position){

    	var tx=0,ty=0,tw= p_width,th= p_height;

    	p_ratio = p_width/p_height;
    	if (p_ratio>aspect_ratio){
    		//tx/ty = aspect_ratio *
    		tw = p_height * aspect_ratio;
    		tx = (p_width-tw) * position/100;
    		//alert('X:'+tx);
    	} else {
    		th = p_width / aspect_ratio;
    		ty = (p_height-th) * position/100;
    		//alert('Y:'+ty);
    	}
    	
    	//alert('x:'+tx+'y:'+ty+'w:'+tw+'h:'+th);
    	jcrop_api.aspect_ratio = aspect_ratio;
    	jcrop_api.setSelect([parseInt(tx),parseInt(ty),parseInt(tw+tx),parseInt(th+ty)]);
    } // end of function show_preview
    
    //show_preview(1.25, 500, 370, 50);
		</script>

	</head>

	<body>

		<img src="demo_files/flowers.jpg" id="cropbox" />
		
		<input type=text value="50" id="position_setting" onChange="change_position(this.value)">

  	<script language="Javascript">	
  		function change_position(value){
  		   show_preview(1.25, 500, 370, value);
  	  } 
		</script>

	</body>

</html>
